.filmPlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background-image: linear-gradient(var(--background-g2));
  --background-g2: 90deg, #1a2e4a 0, #409890 100%;

  .title {
    padding-left: 8vw;
    color: #c4c2c2;
    font-size: 1.5rem;
    margin: 2vw 0;
  }

  .title_is {
    padding-left: 8vw;
    color: #ffffff;
    font-size: 1rem;
  }

  * {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  .MoviesHeader {
    width: 100%;
    height: 15vw;
    padding: 2vw 3vw;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .MoviesHeader_logo {
      width: 7vw;
      margin-left: 2vw;

      img {
        width: 100%;
      }
    }

    .MoviesHeader_search {
      width: 63%;
      height: 8vw;

      .MoviesHeaderViesInput {
        border: none;
        width: 100%;
        height: 8vw;
        border-radius: 20px;
        color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.2);
        display: block;
        margin-bottom: 3vw;
        text-align: left;
        padding-left: 4vw;
      }
    }

    .MoviesHeader_bottom {
      width: 20%;
      height: 7vw;
    }

    .MoviesHeader_bottom_body {
      width: 100%;
      height: 7vw;
      background: #16e091;
      border-radius: 5px;
      color: #425870;
    }
  }

  #video {
    width: 100%;
    height: 200px;
  }

  .vjs-big-play-button {
    margin: 10vh 0 0 37vw;
  }

  .moviesPlay_sapn {
    color: #999999;
    display: block;
    margin: 5vw auto;
    text-align: center;
  }

  .moviesPlay_yuan {
    width: 90%;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;

    button {
      margin: 5px 10px;
      padding: 0 3vw;
      color: #cccaca;
      border: 1px solid #cccaca;
      border-radius: 5px;
    }
  }

  // 猜你喜欢
  .filmPlay_love {
    width: 90%;
    margin: 5vw auto;

    .filmPlay_love_title {
      color: #cccaca;
      font-size: 1.2rem;
      margin-bottom: 2vw;
    }

    .filmPlayUl {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      li {
        width: 30%;
        height: 45vw;
        margin-bottom: 5vw;

        img {
          width: 100%;
        }

        p {
          color: aliceblue;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; //溢出不换行
        }
      }
    }
  }

  .filmPlayUlList {
    width: 88%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 3vw;
    padding: 0 2vw;

    .filmPlayUlIndex {
      width: 10vw;
      height: 10vw;
      text-align: center;
      line-height: 9vw;
      font-size: 1.2rem;
      color: aliceblue;
      border: 2px solid #999999;
      margin: 0 2vw 2vw 0;
      border-radius: 4px;
    }

    .borderColor {
      border: 2px solid #16e091;
      color: #16e091;
    }
  }
}